---
title: Badges
description: Documentation and examples for badges, our small count and labeling component.
---

import BadgeBasic from '!!raw-loader!../examples/Badge/Basic';
import BadgeButton from '!!raw-loader!../examples/Badge/Button';
import BadgePill from '!!raw-loader!../examples/Badge/Pill';
import BadgeVariations from '!!raw-loader!../examples/Badge/Variations';

## Examples

Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.

<CodeBlock language="jsx" live>
  {BadgeBasic}
</CodeBlock>

Badges can be used as part of links or buttons to provide a counter.

<CodeBlock language="jsx" live>
  {BadgeButton}
</CodeBlock>

Note that depending on how they are used, badges may be confusing for
users of screen readers and similar assistive technologies. While the
styling of badges provides a visual cue as to their purpose, these users
will simply be presented with the content of the badge. Depending on the
specific situation, these badges may seem like random additional words or
numbers at the end of a sentence, link, or button. Unless the context is
clear, consider including additional context with a visually hidden piece
of additional text.

## Contextual variations

Add any of the below mentioned modifier classes to change the
appearance of a badge.

<CodeBlock language="jsx" live>
  {BadgeVariations}
</CodeBlock>

## Pill badges

Use the `pill` modifier class to make badges more rounded (with a larger
`border-radius`). Useful if you miss the badges from v3.

<CodeBlock language="jsx" live>
  {BadgePill}
</CodeBlock>

## API

### Badge

<PropsTable name="Badge" />
